<%--<%@ page import="com.shop.model.Student" %>--%>
<%--<%@ page import="com.shop.service.StudentService" %>&lt;%&ndash;--%>
<%--  Created by IntelliJ IDEA.--%>
<%--  User: Administrator--%>
<%--  Date: 2025/5/30--%>
<%--  Time: 下午8:30--%>
<%--  To change this template use File | Settings | File Templates.--%>

<%--<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>--%>
<%--<%@ page import="java.text.DecimalFormat" %>--%>
<%--<%@ page import="com.shop.model.Student" %>--%>
<%--<%@ page import="com.shop.service.StudentService" %>--%>
<%--<%--%>
<%--    // 模拟获取当前用户余额--%>
<%--    StudentService studentService = new StudentService();--%>
<%--    String studentId = request.getParameter("studentId");--%>
<%--    Student student = studentService.search(studentId);--%>

<%--%>--%>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <meta charset="UTF-8">--%>
<%--    <title>账户充值</title>--%>
<%--    <style>--%>
<%--        body {--%>
<%--            font-family: 'Microsoft YaHei', Arial, sans-serif;--%>
<%--            background-color: #f5f5f5;--%>
<%--            margin: 0;--%>
<%--            padding: 20px;--%>
<%--            color: #333;--%>
<%--        }--%>
<%--        .container {--%>
<%--            max-width: 600px;--%>
<%--            margin: 0 auto;--%>
<%--            background: white;--%>
<%--            padding: 30px;--%>
<%--            border-radius: 8px;--%>
<%--            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);--%>
<%--        }--%>
<%--        h1 {--%>
<%--            color: #1890ff;--%>
<%--            text-align: center;--%>
<%--            margin-bottom: 30px;--%>
<%--        }--%>
<%--        .balance {--%>
<%--            font-size: 24px;--%>
<%--            text-align: center;--%>
<%--            margin: 20px 0;--%>
<%--            padding: 15px;--%>
<%--            background: #f0f9ff;--%>
<%--            border-radius: 5px;--%>
<%--        }--%>
<%--        .balance span {--%>
<%--            color: #1890ff;--%>
<%--            font-weight: bold;--%>
<%--        }--%>
<%--        .recharge-options {--%>
<%--            margin: 30px 0;--%>
<%--        }--%>
<%--        .amount-options {--%>
<%--            display: flex;--%>
<%--            flex-wrap: wrap;--%>
<%--            gap: 15px;--%>
<%--            margin-bottom: 20px;--%>
<%--        }--%>
<%--        .amount-option {--%>
<%--            flex: 1;--%>
<%--            min-width: 100px;--%>
<%--            text-align: center;--%>
<%--        }--%>
<%--        .amount-btn {--%>
<%--            width: 100%;--%>
<%--            padding: 12px;--%>
<%--            border: 2px solid #ddd;--%>
<%--            border-radius: 5px;--%>
<%--            background: white;--%>
<%--            font-size: 16px;--%>
<%--            cursor: pointer;--%>
<%--            transition: all 0.3s;--%>
<%--        }--%>
<%--        .amount-btn:hover {--%>
<%--            border-color: #1890ff;--%>
<%--            color: #1890ff;--%>
<%--        }--%>
<%--        .amount-btn.selected {--%>
<%--            border-color: #1890ff;--%>
<%--            background: #e6f7ff;--%>
<%--            color: #1890ff;--%>
<%--            font-weight: bold;--%>
<%--        }--%>
<%--        .custom-amount {--%>
<%--            margin-top: 20px;--%>
<%--        }--%>
<%--        .custom-amount input {--%>
<%--            width: 100%;--%>
<%--            padding: 12px;--%>
<%--            border: 2px solid #ddd;--%>
<%--            border-radius: 5px;--%>
<%--            font-size: 16px;--%>
<%--            box-sizing: border-box;--%>
<%--        }--%>
<%--        .payment-methods {--%>
<%--            margin: 30px 0;--%>
<%--        }--%>
<%--        .payment-method {--%>
<%--            display: flex;--%>
<%--            align-items: center;--%>
<%--            padding: 15px;--%>
<%--            border: 2px solid #ddd;--%>
<%--            border-radius: 5px;--%>
<%--            margin-bottom: 15px;--%>
<%--            cursor: pointer;--%>
<%--            transition: all 0.3s;--%>
<%--        }--%>
<%--        .payment-method:hover {--%>
<%--            border-color: #1890ff;--%>
<%--        }--%>
<%--        .payment-method.selected {--%>
<%--            border-color: #1890ff;--%>
<%--            background: #e6f7ff;--%>
<%--        }--%>
<%--        .payment-method img {--%>
<%--            width: 40px;--%>
<%--            height: 40px;--%>
<%--            margin-right: 15px;--%>
<%--        }--%>
<%--        .payment-method .info {--%>
<%--            flex: 1;--%>
<%--        }--%>
<%--        .payment-method .name {--%>
<%--            font-weight: bold;--%>
<%--            margin-bottom: 5px;--%>
<%--        }--%>
<%--        .submit-btn {--%>
<%--            width: 100%;--%>
<%--            padding: 15px;--%>
<%--            background: #1890ff;--%>
<%--            color: white;--%>
<%--            border: none;--%>
<%--            border-radius: 5px;--%>
<%--            font-size: 18px;--%>
<%--            cursor: pointer;--%>
<%--            transition: background 0.3s;--%>
<%--        }--%>
<%--        .submit-btn:hover {--%>
<%--            background: #40a9ff;--%>
<%--        }--%>
<%--        .submit-btn:disabled {--%>
<%--            background: #ccc;--%>
<%--            cursor: not-allowed;--%>
<%--        }--%>
<%--        .error-msg {--%>
<%--            color: #f5222d;--%>
<%--            text-align: center;--%>
<%--            margin: 15px 0;--%>
<%--        }--%>
<%--    </style>--%>
<%--</head>--%>
<%--<body>--%>
<%--<div class="container">--%>
<%--    <h1>账户充值</h1>--%>

<%--    <div class="balance">--%>
<%--        当前账户余额: <span>¥<%= student.getMoney() %></span>--%>
<%--    </div>--%>


<%--    <form action="RechargeServlet" method="post" id="rechargeForm">--%>
<%--        <div class="recharge-options">--%>
<%--            <h3>选择充值金额</h3>--%>
<%--            <div class="amount-options">--%>
<%--                <div class="amount-option">--%>
<%--                    <button type="button" class="amount-btn" data-amount="100">¥100</button>--%>
<%--                </div>--%>
<%--                <div class="amount-option">--%>
<%--                    <button type="button" class="amount-btn" data-amount="200">¥200</button>--%>
<%--                </div>--%>
<%--                <div class="amount-option">--%>
<%--                    <button type="button" class="amount-btn" data-amount="500">¥500</button>--%>
<%--                </div>--%>
<%--                <div class="amount-option">--%>
<%--                    <button type="button" class="amount-btn" data-amount="1000">¥1000</button>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="custom-amount">--%>
<%--                <input type="number" id="customAmount" name="amount" placeholder="输入其他金额" min="1" step="0.01">--%>
<%--            </div>--%>
<%--            <input type="hidden" id="selectedAmount" name="selectedAmount" value="">--%>
<%--        </div>--%>

<%--        <div class="payment-methods">--%>
<%--            <h3>选择支付方式</h3>--%>
<%--            <div class="payment-method" data-method="alipay">--%>
<%--                <img src="img/支付宝_爱给网_aigei_com.png" alt="支付宝">--%>
<%--                <div class="info">--%>
<%--                    <div class="name">支付宝</div>--%>
<%--                    <div class="desc">安全快捷的在线支付</div>--%>
<%--                </div>--%>
<%--                <input type="radio" name="paymentMethod" value="alipay" checked style="display: none;">--%>
<%--            </div>--%>
<%--            <div class="payment-method" data-method="wechat">--%>
<%--                <img src="img/微信支付_爱给网_aigei_com.png" alt="微信支付">--%>
<%--                <div class="info">--%>
<%--                    <div class="name">微信支付</div>--%>
<%--                    <div class="desc">微信安全支付</div>--%>
<%--                </div>--%>
<%--                <input type="radio" name="paymentMethod" value="wechat" style="display: none;">--%>
<%--            </div>--%>
<%--        </div>--%>
<%--        <input type="hidden" name="studentId" value="<%= student.getStudentId() %>">--%>
<%--        <input type="hidden" name="studentMoney" value="<%= student.getMoney() %>">--%>
<%--        <button type="submit" class="submit-btn" id="submitBtn" disabled>立即充值</button>--%>
<%--    </form>--%>
<%--</div>--%>

<%--<script>--%>
<%--    // 金额选择逻辑--%>
<%--    const amountBtns = document.querySelectorAll('.amount-btn');--%>
<%--    const customAmount = document.getElementById('customAmount');--%>
<%--    const selectedAmount = document.getElementById('selectedAmount');--%>
<%--    const submitBtn = document.getElementById('submitBtn');--%>

<%--    amountBtns.forEach(btn => {--%>
<%--        btn.addEventListener('click', () => {--%>
<%--            // 移除所有选中状态--%>
<%--            amountBtns.forEach(b => b.classList.remove('selected'));--%>

<%--            // 设置当前选中--%>
<%--            btn.classList.add('selected');--%>
<%--            const amount = btn.getAttribute('data-amount');--%>
<%--            selectedAmount.value = amount;--%>
<%--            customAmount.value = '';--%>

<%--            // 启用提交按钮--%>
<%--            submitBtn.disabled = false;--%>
<%--        });--%>
<%--    });--%>

<%--    // 自定义金额输入--%>
<%--    customAmount.addEventListener('input', () => {--%>
<%--        // 移除固定金额的选中状态--%>
<%--        amountBtns.forEach(b => b.classList.remove('selected'));--%>

<%--        // 设置自定义金额--%>
<%--        selectedAmount.value = customAmount.value;--%>

<%--        // 检查是否有效金额--%>
<%--        submitBtn.disabled = !customAmount.value || parseFloat(customAmount.value) <= 0;--%>
<%--    });--%>

<%--    // 支付方式选择--%>
<%--    const paymentMethods = document.querySelectorAll('.payment-method');--%>
<%--    paymentMethods.forEach(method => {--%>
<%--        method.addEventListener('click', () => {--%>
<%--            // 移除所有选中状态--%>
<%--            paymentMethods.forEach(m => m.classList.remove('selected'));--%>

<%--            // 设置当前选中--%>
<%--            method.classList.add('selected');--%>

<%--            // 更新radio选中状态--%>
<%--            const radio = method.querySelector('input[type="radio"]');--%>
<%--            radio.checked = true;--%>
<%--        });--%>
<%--    });--%>

<%--    // 初始化选中第一个支付方式--%>
<%--    paymentMethods[0].classList.add('selected');--%>
<%--</script>--%>
<%--</body>--%>
<%--</html>--%>


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.shop.model.Student" %>
<%@ page import="com.shop.service.StudentService" %>
<%@ page import="com.shop.service.IStudentService" %>
<%
    IStudentService istudentService = new StudentService();
    String studentId = request.getParameter("studentId");
    Student student = istudentService.search(studentId);
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>账户充值</title>
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3a0ca3;
            --accent-color: #4895ef;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4cc9f0;
            --danger-color: #f72585;
            --border-radius: 12px;
            --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
        }

        body {
            background-color: #f5f7ff;
            color: var(--dark-color);
            line-height: 1.6;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .container {
            max-width: 640px;
            margin: 40px auto;
            background: white;
            padding: 40px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            position: relative;
            overflow: hidden;
        }

        .container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        }

        h1 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 30px;
            font-size: 28px;
            font-weight: 600;
            position: relative;
            padding-bottom: 15px;
        }

        h1::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            border-radius: 3px;
        }

        .balance {
            font-size: 22px;
            text-align: center;
            margin: 30px 0;
            padding: 20px;
            background: linear-gradient(135deg, #f0f7ff 0%, #e6f1ff 100%);
            border-radius: var(--border-radius);
            border: 1px solid rgba(67, 97, 238, 0.2);
            box-shadow: 0 2px 8px rgba(67, 97, 238, 0.1);
        }

        .balance span {
            color: var(--primary-color);
            font-weight: bold;
            font-size: 28px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .recharge-section {
            margin: 40px 0;
        }

        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--secondary-color);
            display: flex;
            align-items: center;
        }

        .section-title::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 18px;
            background: var(--primary-color);
            margin-right: 10px;
            border-radius: 2px;
        }

        .amount-options {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-bottom: 25px;
        }

        .amount-btn {
            width: 100%;
            padding: 16px 10px;
            border: 2px solid #e0e7ff;
            border-radius: var(--border-radius);
            background: white;
            font-size: 16px;
            font-weight: 500;
            color: var(--dark-color);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .amount-btn:hover {
            border-color: var(--accent-color);
            color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15);
        }

        .amount-btn.selected {
            border-color: var(--primary-color);
            background: linear-gradient(135deg, #f0f7ff 0%, #e6f1ff 100%);
            color: var(--primary-color);
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15);
        }

        .amount-btn::after {
            content: '元';
            font-size: 12px;
            color: #888;
            margin-top: 4px;
        }

        .amount-btn.selected::after {
            color: var(--primary-color);
        }

        .custom-amount {
            position: relative;
            margin-top: 15px;
        }

        .custom-amount input {
            width: 100%;
            padding: 16px 20px;
            border: 2px solid #e0e7ff;
            border-radius: var(--border-radius);
            font-size: 16px;
            box-sizing: border-box;
            transition: var(--transition);
            font-weight: 500;
        }

        .custom-amount input:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
        }

        .custom-amount::before {
            content: '¥';
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            color: var(--primary-color);
            font-weight: 500;
        }

        .custom-amount input {
            padding-left: 35px;
        }

        .payment-methods {
            margin: 40px 0 30px;
        }

        .payment-method {
            display: flex;
            align-items: center;
            padding: 18px 20px;
            border: 2px solid #e0e7ff;
            border-radius: var(--border-radius);
            margin-bottom: 15px;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .payment-method:hover {
            border-color: var(--accent-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.1);
        }

        .payment-method.selected {
            border-color: var(--primary-color);
            background: linear-gradient(135deg, #f0f7ff 0%, #e6f1ff 100%);
        }

        .payment-method.selected::after {
            content: '✓';
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .payment-method img {
            width: 48px;
            height: 48px;
            margin-right: 15px;
            object-fit: contain;
        }

        .payment-method .info {
            flex: 1;
        }

        .payment-method .name {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--dark-color);
        }

        .payment-method .desc {
            font-size: 14px;
            color: #666;
        }

        .submit-btn {
            width: 100%;
            padding: 18px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            margin-top: 20px;
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        .submit-btn:disabled {
            background: #ccc;
            box-shadow: none;
            cursor: not-allowed;
            transform: none;
        }

        .error-msg {
            color: var(--danger-color);
            text-align: center;
            margin: 15px 0;
            font-size: 14px;
        }

        @media (max-width: 768px) {
            .container {
                margin: 20px;
                padding: 30px 20px;
            }

            .amount-options {
                grid-template-columns: repeat(2, 1fr);
            }

            h1 {
                font-size: 24px;
            }

            .balance {
                font-size: 18px;
            }

            .balance span {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>账户充值</h1>

    <div class="balance">
        当前账户余额: <span>¥<%= student.getMoney() %></span>
    </div>

    <form action="RechargeServlet" method="post" id="rechargeForm">
        <div class="recharge-section">
            <div class="section-title">选择充值金额</div>
            <div class="amount-options">
                <button type="button" class="amount-btn" data-amount="100">100</button>
                <button type="button" class="amount-btn" data-amount="200">200</button>
                <button type="button" class="amount-btn" data-amount="500">500</button>
                <button type="button" class="amount-btn" data-amount="1000">1000</button>
            </div>
            <div class="custom-amount">
                <input type="number" id="customAmount" name="amount" placeholder="输入其他金额" min="1" step="0.01">
            </div>
            <input type="hidden" id="selectedAmount" name="selectedAmount" value="">
        </div>

        <div class="recharge-section payment-methods">
            <div class="section-title">选择支付方式</div>
            <div class="payment-method" data-method="alipay">
                <img src="img/支付宝_爱给网_aigei_com.png" alt="支付宝">
                <div class="info">
                    <div class="name">支付宝</div>
                    <div class="desc">安全快捷的在线支付</div>
                </div>
                <input type="radio" name="paymentMethod" value="alipay" checked style="display: none;">
            </div>
            <div class="payment-method" data-method="wechat">
                <img src="img/微信支付_爱给网_aigei_com.png" alt="微信支付">
                <div class="info">
                    <div class="name">微信支付</div>
                    <div class="desc">微信安全支付</div>
                </div>
                <input type="radio" name="paymentMethod" value="wechat" style="display: none;">
            </div>
        </div>

        <input type="hidden" name="studentId" value="<%= student.getStudentId() %>">
        <input type="hidden" name="studentMoney" value="<%= student.getMoney() %>">
        <button type="submit" class="submit-btn" id="submitBtn" disabled>立即充值</button>
    </form>
</div>

<script>
    // 金额选择逻辑
    const amountBtns = document.querySelectorAll('.amount-btn');
    const customAmount = document.getElementById('customAmount');
    const selectedAmount = document.getElementById('selectedAmount');
    const submitBtn = document.getElementById('submitBtn');

    amountBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            // 移除所有选中状态
            amountBtns.forEach(b => b.classList.remove('selected'));

            // 设置当前选中
            btn.classList.add('selected');
            const amount = btn.getAttribute('data-amount');
            selectedAmount.value = amount;
            customAmount.value = '';

            // 启用提交按钮
            submitBtn.disabled = false;
        });
    });

    // 自定义金额输入
    customAmount.addEventListener('input', () => {
        // 移除固定金额的选中状态
        amountBtns.forEach(b => b.classList.remove('selected'));

        // 设置自定义金额
        selectedAmount.value = customAmount.value;

        // 检查是否有效金额
        submitBtn.disabled = !customAmount.value || parseFloat(customAmount.value) <= 0;
    });

    // 支付方式选择
    const paymentMethods = document.querySelectorAll('.payment-method');
    paymentMethods.forEach(method => {
        method.addEventListener('click', () => {
            // 移除所有选中状态
            paymentMethods.forEach(m => m.classList.remove('selected'));

            // 设置当前选中
            method.classList.add('selected');

            // 更新radio选中状态
            const radio = method.querySelector('input[type="radio"]');
            radio.checked = true;
        });
    });

    // 初始化选中第一个支付方式
    paymentMethods[0].classList.add('selected');
</script>
</body>
</html>